import { Input, Form, Select } from "antd";

import { ArticleType } from "types/article";

interface SearchPanelProps {
  param: Partial<Pick<ArticleType, "title" | "status">>;
  setParam: (param: SearchPanelProps["param"]) => void;
}

export const SearchPanel = ({ param, setParam }: SearchPanelProps) => {
  return (
    <Form layout="inline">
      <Form.Item label="标题">
        <Input
          type="text"
          value={param.title}
          onChange={(evt) =>
            setParam({
              ...param,
              title: evt.target.value,
            })
          }
        />
      </Form.Item>
      <Form.Item label="状态">
        <Select
          defaultValue={0}
          style={{ width: 120 }}
          onChange={(value) =>
            setParam({
              ...param,
              status: value,
            })
          }
        >
          <Select.Option value={0}>全部</Select.Option>
          <Select.Option value={1}>显示</Select.Option>
          <Select.Option value={2}>隐藏</Select.Option>
        </Select>
      </Form.Item>
    </Form>
  );
};
